<template>
  <div class="video-box">
    <div class="video-temp" v-for="(videoItem, index) in videoList" :key="index"
      :style="{ width: index ? secondaryWidth : mainWidth, height: index ? secondaryHeight : mainHeight }">
      <div class="video-auditor">
        <div class="video-title"><span>第{{ index + 1 }}路</span></div>
        <div class="video-play">
          <img src="@/assets/contentRight/content_vedio_center.png" alt="">
          <video src=""></video>
        </div>
      </div>
    </div>
    <!-- <audio ref="audioPlayer" id="promptAudio" class="audio" src="@/media/laidian.mp3" controls autoplay="autoplay"
      loop="loop"></audio> -->
    <prompt ref="prompt" :prompt-details="promptDetails" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import communication from "@/console/communication";
import prompt from './components/prompt.vue'

export default {
  name: 'videoCall',
  data() {
    return {
      isShowPrompt: false,
      promptNum: 0,
      vidoeNum: 0,// 受理视频数
      videoList: [],
      promptDetails: null,
      mainWidth: '100%',
      mainHeight: '100%',
      secondaryWidth: '100%',
      secondaryHeight: '100%',
    }
  },
  created() {

    const wayNum = sessionStorage.getItem('wayNum') || '2';
    this.videoList = new Array(this.wayNum || parseInt(wayNum))
    this.handleWh(this.wayNum || parseInt(wayNum))

    // 15秒发送消息
    setInterval(() => {
      const param = {
        userId: this.userInfo.userId,
        groupId: this.userInfo.group,
        lineNum: this.vidoeNum + this.promptNum, // vidoeNum(当前正在处理视频数量)promptNum(弹框数量)
        taskArray: [],
        token: this.userInfo.token,
      };
      // console.log("15秒发送消息", param);
      communication.emit("damage-online-heartbeat", param);
    }, 15000);
    this.userHeartbeatUpdate();
  },
  // mounted() {
  //   const _this = this
  //   window.addEventListener('click', function () {
  //     console.log(1)
  //     setTimeout(() => {
  //       // this.$refs.prompt.audioPlay()
  //       // var audio = document.getElementById("promptAudio");
  //       _this.$nextTick(() => {
  //         const audio = _this.$refs.audioPlayer
  //         audio.play()
  //       })

  //     }, 1000)
  //   });
  // },
  computed: {
    ...mapState({
      wayNum: state => state.video.wayNum,
      userInfo: state => state.user.userInfo,
    }),
  },
  components: {
    prompt
  },
  methods: {
    userHeartbeatUpdate() {
      communication.socketInit(res => {

        if (res.mode === "auditor") {
          const msg = res.info;
          if (msg.operate == "new") {
            this.promptDetails = [msg.info];
            setTimeout(() => {
              this.isShowPrompt = true;
              // this.$refs.prompt.audioPlay()
              // var audio = document.getElementById("promptAudio");
              const audio = this.$refs.audioPlayer
              console.log('音频播放阻止', audio);
              audio.play()
            }, 1000)
          }
        } else if (res.mode == "cancel") {
          this.$message('客户取消呼叫');
          this.isShowPrompt = false;

        }
      }, this.userInfo.userId, this.userInfo.group)
    },
    handleWh(num) {
      switch (num) {
        case 1:
          this.mainWidth = '100%';
          this.mainHeight = '100%';
          break;
        case 2:
          this.mainWidth = '50%';
          this.mainHeight = '100%';
          this.secondaryWidth = '50%';
          this.secondaryHeight = '100%';
          break;
        case 4:
          this.mainWidth = '50%';
          this.mainHeight = '50%';
          this.secondaryWidth = '50%';
          this.secondaryHeight = '50%';
          break;
        case 6:
          this.mainWidth = '66.66%';
          this.mainHeight = '66.2%';
          this.secondaryWidth = '33.33%'
          this.secondaryHeight = '33.1%';
          break;
      }
    }
  },

  watch: {
    wayNum: {
      handler(newValue) {
        this.videoList = new Array(newValue)
        this.handleWh(newValue)
      },
      deep: true
    }
  }
}
</script>
<style lang='scss' scoped>
.video-box {
  height: 100%;
  overflow: hidden;
}

.video-temp {
  padding: 3px;
  float: left;

  .video-auditor {
    width: 100%;
    height: 100%;

    .video-title {
      height: 30px;
      background-color: #606060;
      color: #ffffff;
      line-height: 30px;
      font-size: 12px;
      padding-left: 15px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }

    .video-play {
      width: 100%;
      height: calc(100% - 30px);
      position: relative;
      background-color: #606060;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }

    img {
      width: 100px;
      height: 100px;
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 50px);
    }
  }
}
</style>